<template>
  <view class="signature">
    <uv-navbar
      title="签名"
      placeholder
      bg-color="transparent"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    >
			<template #right>
				<uv-text text="提交" color="#4EA770" size="28rpx" @click="signatureRef.save()" />
			</template>
		</uv-navbar>
    <view class="signature-content">
      <uv-text
        text="签名信息"
        v-if="params.page == 'picture'"
        size="28rpx"
        color="#212121"
        margin="0 0 20rpx 0"
      />
      <uv-input
        v-if="params.page == 'picture'"
        v-model="name"
        placeholder="请输入签名信息"
      />
      <uv-text text="电子签名" size="28rpx" color="#212121" margin="20rpx 0" />
      <uv-icon
        class="sign-del"
        :style="{
          top: params.page == 'picture' ? '160rpx' : '40rpx',
        }"
        name="trash"
        size="40rpx"
        color="#F00"
        @click="delSign"
      />
      <view
        class="sign-img"
        :style="{
          height:
            params.page == 'picture' ? 'calc(100% - 220rpx)' : 'calc(100% - 120rpx)',
        }"
      >
        <g-signature ref="signatureRef" @getImg="getSignImage" />
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { commonUpload } from "@/request/common.js";
import { addSignContract, signAdd } from "@/request/user.js";

const signatureRef = ref(); // 签名组件ref
const name = ref(""); // 签名名称
const signUrl = ref(""); // 签名图片
const params = ref({}); // 页面传参

onLoad((e) => {
  params.value = JSON.parse(e.res);
});

// 获取签名图片
const getSignImage = (base64) => {
  uni.getImageInfo({
    src: base64,
    success: (image) => {
      commonUpload(image.path).then((res) => {
        if (res.code == 200) {
          signUrl.value = res.fileName;
          handleSubmit();
        }
      });
    },
  });
};

// 删除签名
const delSign = () => {
  signatureRef.value.clear();
  signUrl.value = "";
};

// 提交
const handleSubmit = () => {
  if (params.value.page == "picture") {
    // 签名
    let data = {
      name: name.value,
      signUrl: signUrl.value,
      type: 1,
    };
    signAdd(data).then((res) => {
      if (res.code == 200) {
        success();
      }
    });
  } else if (params.value.page == "contract") {
    // 合同签名
    let data = {
      userId: params.value.userId,
      userType: params.value.userType,
      contractId: params.value.contractId,
      signUrl: signUrl.value,
    };
    addSignContract(data).then((res) => {
      if (res.code == 200) {
        success();
      }
    });
  }
};

// 成功提示
const success = () => {
  uni.showToast({
    title: "提交成功，请刷新电脑页面查看",
    icon: "none",
    duration: 3000,
    success: () => {
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 3000);
    },
  });
};
</script>
<style lang="scss" scoped>
.signature {
  width: 100%;
  height: 100vh;
  padding: 40rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #50bc7a 100%);

  .signature-content {
    position: relative;
    width: 100%;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    height: calc(100vh - 44px - var(--status-bar-height) - 80rpx);
    background: linear-gradient(180deg, #ace1b5 0%, #fbfbfb 9%, #fbfbfb 100%);
    box-shadow: 0 0 40rpx 4rpx rgba(78, 167, 112, 0.16);
    border-radius: 40rpx;

    .sign-del {
      position: absolute;
      right: 20rpx;
      top: 50rpx;
    }

    .sign-img {
      border-radius: 8rpx;
      border: 2rpx solid #dcdfe6;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
